<!--
 * @Author: Zcl84765
 * @Date: 2022-12-05 21:18:06
 * @LastEditors: Zcl84765
 * @LastEditTime: 2022-12-06 09:15:38
-->
<template>
  <div>
    <el-date-picker
      type="dates"
      v-model="dateValue"
      placeholder="选择一个或多个日期"
      value-format="yyyy-MM-dd"
      format="yyyy-MM-dd"
      @change="dateChange"
    >
    </el-date-picker>
    <div>
      <div v-for="(item, idx) in dateForm" :key="idx">
        <div>{{ item.date }}</div>
        <el-button type="primary" v-if="idx == 0" @click="addMore(item, idx)"
          >批量添加</el-button
        >
        <div v-for="(it, ix) in item.dateItem" :key="ix">
          <el-time-picker
            is-range
            v-model="it.time"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
          >
          </el-time-picker>
        </div>
        <el-button type="primary" @click="addTimeD(idx)">添加时间段</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateValue: [],
      dateForm: []
    };
  },
  methods: {
    addMore(it, idx) {
      console.log(it, idx);
    },
    addTimeD(idx) {
      this.dateForm[idx].dateItem.push({
        time: ""
      });
    },
    dateChange(e) {
      console.log(e);
      if (e) {
        this.dateValue = e;
        this.dateForm = this.dateValue.map(v => {
          return {
            date: v,
            dateItem: [
              {
                time: ""
              }
            ]
          };
        });
      } else {
        this.dateForm = [];
      }
    },
    addGetTime() {
      let date = new Date(date1);
      let year = date.getFullYear();
      //补全位数
      let month = (date.getMonth() + 1).toString().padStart(2, "0");
      let day = (date.getDate() + i).toString().padStart(2, "0");
      return year + "-" + month + "-" + day;
    }
  }
};
</script>

<style></style>
